<div class="dialougue_property">
  <el-form label-width="80px" :model="formData">
    <el-row style="gap: 60px;
    left: 18%;">
      <el-button @click="loc_visible = true" style=" width: 120px;
      height: 120px;">
        <div class="common-pic" style="  display: flex;
        flex-direction: column;
        align-items: center;" v-if="!formData.locationPic">
          <el-icon :size="30">
            <Picture />
          </el-icon>
          <span>地点</span>
        </div>
        <div v-else>
          <img class="node-icon" id="dynamicImage" :src="formData.locationPic" style="width: 100%;height:100%">
        </div>
      </el-button>
      <el-button @click="role_visible = true" style=" width: 120px;
      height: 120px;">
        <div class="common-pic" style="  display: flex;
        flex-direction: column;
        align-items: center;" v-if="!formData.rolePic">
          <el-icon class="node-user">
          </el-icon>
          <span>角色</span>
        </div>
        <div v-else>
          <img class="node-icon" id="dynamicImage" :src="formData.rolePic" style="width: 100%;height:100%">
        </div>
      </el-button>
    </el-row>

    <div style="margin: 20px 0" />
    <el-form-item label="图标题">
      <el-input v-model="formData.graphRes_title"></el-input>
    </el-form-item>
    <el-form-item label="图ID">
      <el-input v-model="formData.graphRes_id" disabled></el-input>
    </el-form-item>
    <el-form-item label="角色位置">
      <el-switch v-model="formData.rolePos" class="mb-2" active-text="右" inactive-text="左" />
    </el-form-item>
    <el-form-item label="角色名称">
      <el-input v-model="formData.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色id">
      <el-input v-model="formData.roleID"></el-input>
    </el-form-item>
    <el-form-item label="地点名称">
      <el-input v-model="formData.locationName"></el-input>
    </el-form-item>
    <el-form-item label="地点id">
      <el-input v-model="formData.locationID"></el-input>
    </el-form-item>
    <el-form-item label="对话内容">
      <el-input v-model="formData.content" rows=5  maxlength="300" show-word-limit type="textarea"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>

    <!-- 角色对话框 -->
    <RoleDialog v-model="role_visible" :show-close="false" :treeData="treeData" @sureRolePic="sureRolePic" @closeRolePanel="closeRolePanel"></RoleDialog>
    <LocDialog v-model="loc_visible" :show-close="false" :treeData="treeData" @sureLocPic="sureLocPic" @closeLocPanel="closeLocPanel"></LocDialog>

    

    
  </el-form>


</div>